<p-toast position="top-right"></p-toast>
<p-confirmDialog></p-confirmDialog>

<div class="main-container enclosing-container">
  <div class="settings-header">
    <h2 class="settings-title">
      <i class="pi pi-tablet"></i>
      Kobo Integration Configuration
      <app-external-doc-link docType="kobo"></app-external-doc-link>
    </h2>
    <p class="settings-description">
      Configure Kobo device integration to sync your library books and reading progress with your Kobo e-reader.
    </p>
  </div>

  @if (hasKoboTokenPermission) {
    <div class="settings-content">
      <div class="preferences-section">
        <div class="section-header">
          <h3 class="section-title">
            <i class="pi pi-sync"></i>
            Sync Configuration
          </h3>
          <p class="section-description">
            Enable and configure synchronization between your Booklore library and Kobo device.
          </p>
        </div>

        <div class="settings-card">
          <div class="setting-item">
            <div class="setting-info">
              <div class="setting-label-row">
                <label class="setting-label">Enable Kobo Sync</label>
                <p-toggle-switch
                  id="syncEnabled"
                  name="syncEnabled"
                  [(ngModel)]="koboSyncSettings.syncEnabled"
                  (ngModelChange)="onSyncToggle()">
                </p-toggle-switch>
              </div>
              <p class="setting-description">
                Turn on synchronization to automatically sync your library books to your Kobo device.
              </p>
            </div>
          </div>

          @if (koboSyncSettings.syncEnabled) {
            <div class="setting-item">
              <div class="setting-info">
                <div class="setting-label-row">
                  <label class="setting-label">Kobo Sync Token</label>
                  <div class="token-input-group">
                    <input
                      pInputText
                      id="koboToken"
                      [(ngModel)]="koboSyncSettings.token"
                      [type]="showToken ? 'text' : 'password'"
                      readonly
                      name="koboToken"
                      class="token-input"
                    />
                    <p-button
                      icon="pi pi-copy"
                      outlined="true"
                      severity="info"
                      size="small"
                      (onClick)="copyText(koboSyncSettings.token, 'Token')"
                      [disabled]="!koboSyncSettings.token">
                    </p-button>
                    <p-button
                      [icon]="showToken ? 'pi pi-eye-slash' : 'pi pi-eye'"
                      outlined="true"
                      severity="info"
                      size="small"
                      (onClick)="toggleShowToken()"
                      [disabled]="!koboSyncSettings.token">
                    </p-button>
                  </div>
                </div>
                <p class="setting-description">
                  Your unique sync token for authenticating with your Kobo device. Keep this secure.
                </p>
              </div>
            </div>

            <div class="setting-item">
              <div class="setting-info">
                <div class="setting-label-row">
                  <label class="setting-label">Token Management</label>
                  <p-button
                    icon="pi pi-refresh"
                    outlined="true"
                    severity="warn"
                    size="small"
                    label="Regenerate Token"
                    (onClick)="confirmRegenerateToken()"
                    [disabled]="!credentialsSaved">
                  </p-button>
                </div>
                <p class="setting-description">
                  Regenerate your sync token if needed. This will invalidate the current token.
                </p>
              </div>
            </div>

            <div class="setting-item">
              <div class="setting-info">
                <div class="setting-label-row">
                  <label class="setting-label">Mark as Reading at: {{ koboSyncSettings.progressMarkAsReadingThreshold?.toFixed(0) }}%</label>
                  <div class="slider-container">
                    <p-slider
                      id="markAsReadingThreshold"
                      name="markAsReadingThreshold"
                      [(ngModel)]="koboSyncSettings.progressMarkAsReadingThreshold"
                      [min]="1"
                      [max]="10"
                      [step]="1"
                      (ngModelChange)="onProgressThresholdsChange()">
                    </p-slider>
                  </div>
                </div>
                <p class="setting-description">
                  Books are marked as "Reading" when progress exceeds this percentage. This helps automatically track which books you've started.
                  <br>
                  <strong>Recommended:</strong> 1% (default) - marks as reading after the first page or two.
                </p>
              </div>
            </div>

            <div class="setting-item">
              <div class="setting-info">
                <div class="setting-label-row">
                  <label class="setting-label">Mark as Finished at: {{ koboSyncSettings.progressMarkAsFinishedThreshold?.toFixed(0) }}%</label>
                  <div class="slider-container">
                    <p-slider
                      id="markAsFinishedThreshold"
                      name="markAsFinishedThreshold"
                      [(ngModel)]="koboSyncSettings.progressMarkAsFinishedThreshold"
                      [min]="90"
                      [max]="100"
                      [step]="1"
                      (ngModelChange)="onProgressThresholdsChange()">
                    </p-slider>
                  </div>
                </div>
                <p class="setting-description">
                  Books are marked as "Finished" when progress reaches this percentage. Accounts for books where the last few pages are acknowledgments or index.
                  <br>
                  <strong>Recommended:</strong> 99% (default) - marks as finished when nearly complete.
                </p>
              </div>
            </div>
          }
        </div>
      </div>

      @if (isAdmin) {
        <div class="preferences-section">
          <div class="section-header">
            <h3 class="section-title">
              <i class="pi pi-cog"></i>
              Administrator Settings
            </h3>
            <p class="section-description">
              Configure advanced Kobo sync settings that affect all users on this server.
            </p>
          </div>

          <div class="settings-card">
            <div class="setting-item">
              <div class="setting-info">
                <div class="setting-label-row">
                  <label class="setting-label">Convert to KEPUB</label>
                  <p-toggle-switch
                    id="convertToKepub"
                    [(ngModel)]="koboSettings.convertToKepub"
                    (ngModelChange)="onToggleChange()">
                  </p-toggle-switch>
                </div>
                <p class="setting-description">
                  <strong>Pros:</strong> KEPUB format enables enhanced Kobo features like better typography, reading stats, and faster page turns.
                  <br>
                  <strong>Cons:</strong> Conversion takes extra processing time and may occasionally fail for complex layouts.
                  Books over the size limit below will skip conversion automatically.
                </p>
              </div>
            </div>

            <div class="setting-item">
              <div class="setting-info">
                <div class="setting-label-row">
                  <label class="setting-label">Conversion Size Limit: {{ koboSettings.conversionLimitInMb }} MB</label>
                  <div class="slider-container">
                    <p-slider
                      id="conversionLimit"
                      [(ngModel)]="koboSettings.conversionLimitInMb"
                      [min]="1"
                      [max]="250"
                      [step]="1"
                      (ngModelChange)="onSliderChange()">
                    </p-slider>
                  </div>
                </div>
                <p class="setting-description">
                  Large files (100MB+) can cause conversion timeouts and server strain. Lower limits ensure faster syncing but may skip conversion of larger books.
                  <br>
                  <strong>Recommended:</strong> 50-100MB for most libraries. Very large books will sync as regular EPUB regardless of this setting.
                </p>
              </div>
            </div>

            <div class="setting-item">
              <div class="setting-info">
                <div class="setting-label-row">
                  <label class="setting-label">Force Enable Hyphenation</label>
                  <p-toggle-switch
                    id="forceEnableHyphenation"
                    [(ngModel)]="koboSettings.forceEnableHyphenation"
                    (ngModelChange)="onToggleChange()">
                  </p-toggle-switch>
                </div>
                <p class="setting-description">
                  Force enable hyphenation. Otherwise, hyphenation is only enabled when text alignment on the Kobo
                  device is explicitly set to <i>justified</i>.
                </p>
              </div>
            </div>

            <p-divider></p-divider>

            <div class="setting-item">
              <div class="setting-info">
                <div class="setting-label-row">
                  <label class="setting-label">Convert CBX to EPUB</label>
                  <p-toggle-switch
                    id="convertCbxToEpub"
                    [(ngModel)]="koboSettings.convertCbxToEpub"
                    (ngModelChange)="onToggleChange()">
                  </p-toggle-switch>
                </div>
                <p class="setting-description">
                  Converts CBX files to EPUB during Kobo sync, allowing CBX files to be downloaded and read on Kobo devices.
                </p>
              </div>
            </div>

            <div class="setting-item">
              <div class="setting-info">
                <div class="setting-label-row">
                  <label class="setting-label">CBX Conversion Size Limit: {{ koboSettings.conversionLimitInMbForCbx }} MB</label>
                  <div class="slider-container">
                    <p-slider
                      id="conversionLimitForCbx"
                      [(ngModel)]="koboSettings.conversionLimitInMbForCbx"
                      [min]="1"
                      [max]="500"
                      [step]="1"
                      (ngModelChange)="onSliderChange()">
                    </p-slider>
                  </div>
                </div>
                <p class="setting-description">
                  Comic book archives can be very large due to high-resolution images. Set a reasonable limit to prevent server overload during conversion.
                  <br>
                  <strong>Recommended:</strong> 100-200MB for most comic libraries. CBX files over this limit will not be converted or synced to the device.
                </p>
              </div>
            </div>
          </div>
        </div>
      }
    </div>
  } @else {
    <div class="settings-content">
      <div class="access-denied-card">
        <i class="pi pi-lock"></i>
        <div class="access-denied-content">
          <h3>Access Restricted</h3>
          <p>
            Access to Kobo sync is restricted.
            <br>
            Please contact your administrator to request permission.
          </p>
        </div>
      </div>
    </div>
  }
</div>
